angular.module('myApp',[])

    //数据
    .factory('Data',function () {
        return [
            {
                title:'no1',
                content:'no1-content'
            },
            {
                title:'no2',
                content:'no2-content'
            },
            {
                title:'no3',
                content:'no3-content'
            }
        ]
    })

//    控制器
.controller('firstController',['$scope','Data',function($scope,Data){
    //将factory的Data数据赋给$scope作用域中的data属性
    $scope.data = Data;
}])
//外层指令
.directive('kittencupGroup',function () {
    return {
        restrict :'E',
        //标签不符合标签规范
        replace:true,
        template:'<div class="panel-group" ng-transclude></div>',
        //kittencup-group指令与firstController共享一个作用域
        //指定指令修饰元素中的原来的子节点移动到一个新模板内部
        //将外层标签的子元素放到模板的外层元素的子元素中
        transclude: true,
        controllerAs:'kittencupGroupContrller',
        controller :function () {

            this.groups = [];

            this.closeOtherCollapse = function (currentScope) {
                angular.forEach(this.groups,function(scope) {
                    if(currentScope !== scope){
                        scope.isOpen = false;
                    }
                })
            }
        }
    }
})
//内层指令
.directive('kittencupCollapse',function () {
    return {
        restrict:'E',
        replace: true,
        //往上查找kittencupGroup指令，并且获取它的kittencupGroupController
        require:'^kittencupGroup',
        templateUrl:'app/temp/kittencupCollapse.html',
        //创建一个独立的scope
        //kittencup-collapse指令继承firstController的作用域，但是不继承继承链
        scope:{
            //scope的heading属性 等于 原标签中指令的heading属性的值
            //只读  字符串只适用于只读
            //@ 等价于 @heading
            heading:'@'
        },
        //kittencupGroupContrller必须要在link这里依赖注入，不能通过controller依赖注入进来
        // controller:function (kittencupGroupContrller) {
        //
        // },
        //这里有三个独立的$scope，每一个$scope都有一个isOpen属性
        //这里只能实现单个面板的开关切换，如果要实现一个面板开启，另外两个面板关闭，实现不了
        link : function (scope,element,attrs,kittencupGroupContrller) {

            scope.isOpen = false;

            scope.changeOpen = function () {

                scope.isOpen = !scope.isOpen;

                kittencupGroupContrller.closeOtherCollapse(scope);
            }

            kittencupGroupContrller.groups.push(scope);
        },
        //指定指令修饰元素中的原来的子节点移动到一个新模板内部
        //将原标签的内容放到模板的新标签的子元素中
        transclude: true
    }
})